<template>
  <div class="container">
    <div class="topCon">
      <el-row>
        <el-col class="topTitle">
          <h2>
            <i class="icon iconfont iconfanhui1" @click="goBackOne"></i>
            {{
              caseInfo.complaintPerName
                ? caseInfo.complaintPerName + '的欠薪诉求'
                : '欠薪诉求详情'
            }}
            <span class="reRecord" v-if="caseInfo.isRepeatAppeal == 'YES'"
              >重复诉求</span
            >
            <span
              :class="
                caseInfo.status == 'WAIT_ACCEPT'
                  ? 'during'
                  : caseInfo.status == 'ACCEPTING'
                  ? 'actioning'
                  : 'finished'
              "
              v-else
              >{{ caseInfo.statusDesc }}</span
            >
          </h2>
          <ul class="topTitleInfo">
            <li>
              <!-- <span :class="calcColor(caseInfo)!='GREEN'?(calcColor(caseInfo)==='YELLOW'?'dot yellow':'dot red'):'dot green'"></span> -->
              收件时间：{{ caseInfo.createTime }}
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>
    <div class="spacing"></div>
    <div class="mainCon">
      <el-row class="infoContent">
        <el-col :span="9" class="info infoLeft">
          <p class="title">欠薪诉求信息</p>
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">行业领域</div>
            <el-link
              icon="el-icon-edit"
              class="edit"
              type="primary"
              v-if="
                isShowUpdate && caseInfo.status == 'ACCEPTING' && !editFiled
              "
              @click="toEditFiled"
              >编辑</el-link
            >
          </div>
          <ul class="infoList" v-if="!editFiled">
            <li class="infoListItem">
              <p
                :class="
                  caseInfo.fieldTypeDesc
                    ? 'infoListItemInfo'
                    : 'infoListItemNull'
                "
              >
                <!-- {{caseInfo.fieldType=='CS'?'建筑领域':'非建领域' || '--'}} -->
                {{ changeStringStyle(caseInfo.fieldTypeDesc) }}
              </p>
            </li>
          </ul>
          <case-filed
            v-if="editFiled"
            @callback="callbackCaseFiled"
            :childData="caseInfo"
          />
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">诉求类型</div>
            <el-link
              v-if="isShowUpdate && caseInfo.status == 'ACCEPTING' && !editType"
              icon="el-icon-edit"
              class="edit"
              type="primary"
              @click="toEditType"
              >编辑</el-link
            >
          </div>
          <ul class="infoList" v-if="!editType">
            <li class="infoListItem">
              是否重复诉求：{{ caseInfo.isRepeatAppeal == 'YES' ? '是' : '否' }}
            </li>
            <li class="infoListItem" v-if="caseInfo.isRepeatAppeal == 'YES'">
              同诉求事件首条欠薪诉求：{{ caseInfo.repeatNum }}
            </li>
          </ul>
          <case-type
            v-if="editType"
            :childData="caseInfo"
            @callback="callbackCaseType"
            :isES="true"
          ></case-type>
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">被投诉单位</div>
            <el-link
              icon="el-icon-edit"
              v-if="
                isShowUpdate &&
                caseInfo.status == 'ACCEPTING' &&
                !editDepartment
              "
              class="edit"
              type="primary"
              @click="toEditDepartment"
              >编辑</el-link
            >
          </div>
          <ul class="infoList" v-if="!editDepartment">
            <li class="infoListItem">
              单位名称：
              <span
                :class="
                  caseInfo.complaintName
                    ? 'infoListItemInfo'
                    : 'infoListItemNull'
                "
                >{{ changeStringStyle(caseInfo.complaintName) }}</span
              >
            </li>
            <li class="infoListItem">
              单位地址：
              <span
                :class="
                  caseInfo.address ? 'infoListItemInfo' : 'infoListItemNull'
                "
                >{{ changeStringStyle(caseInfo.address) }}</span
              >
            </li>
            <li class="infoListItem">
              负责人：
              <span
                :class="
                  caseInfo.managerName ? 'infoListItemInfo' : 'infoListItemNull'
                "
                >{{ changeStringStyle(caseInfo.managerName) }}</span
              >
            </li>
            <li class="infoListItem">
              单位电话：
              <span
                :class="caseInfo.tel ? 'infoListItemInfo' : 'infoListItemNull'"
                >{{ changeStringStyle(caseInfo.tel) }}</span
              >
            </li>
          </ul>
          <case-department
            @callback="callbackDepartment"
            v-if="caseInfo.status == 'ACCEPTING' && editDepartment"
            :childData="caseInfo"
          />
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">反映人信息</div>
            <el-link
              icon="el-icon-edit"
              class="edit"
              type="primary"
              v-if="
                isShowUpdate && caseInfo.status == 'ACCEPTING' && !editPerson
              "
              @click="toEditPerson"
              >编辑</el-link
            >
          </div>
          <ul class="infoList" v-if="!editPerson">
            <li class="infoListItem">
              姓名：
              <span
                :class="caseInfo.name ? 'infoListItemInfo' : 'infoListItemNull'"
                >{{ changeStringStyle(caseInfo.name) }}</span
              >
            </li>
            <li class="infoListItem">
              联系电话：
              <span
                :class="
                  caseInfo.perTel ? 'infoListItemInfo' : 'infoListItemNull'
                "
                >{{ changeStringStyle(caseInfo.perTel) }}</span
              >
              <span v-if="caseInfo.repeatNum"
                >(共投诉{{ caseInfo.repeatNum || '0' }}次)</span
              >
            </li>
            <li class="infoListItem">
              身份证号：
              <span
                :class="
                  caseInfo.idcard ? 'infoListItemInfo' : 'infoListItemNull'
                "
                >{{ changeStringStyle(caseInfo.idcard) }}</span
              >
            </li>
          </ul>
          <case-person
            v-if="editPerson"
            @callback="callbackCasePerson"
            :childData="caseInfo"
          />
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">
              欠薪基本情况摘要
            </div>
            <el-link
              icon="el-icon-edit"
              class="edit"
              type="primary"
              v-if="isShowUpdate && caseInfo.status == 'ACCEPTING' && !editBase"
              @click="toEditBase"
              >编辑</el-link
            >
          </div>
          <ul class="infoList" v-if="!editBase">
            <li class="infoListItem">
              <p
                :class="
                  caseInfo.complaintRemark
                    ? 'infoListItemInfo'
                    : 'infoListItemNull'
                "
              >
                {{ changeStringStyle(caseInfo.complaintRemark) }}
              </p>
            </li>
          </ul>
          <case-base
            v-if="editBase"
            @callback="callbackCaseBase"
            :childData="caseInfo"
          />
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">其他</div>
            <el-link
              icon="el-icon-edit"
              class="edit"
              type="primary"
              v-if="
                isShowUpdate && caseInfo.status == 'ACCEPTING' && !editOther
              "
              @click="toEditOther"
              >编辑</el-link
            >
          </div>
          <ul class="infoList" v-if="!editOther">
            <li class="infoListItem">
              所在地区：
              <span v-if="caseInfo.areaId">{{
                caseInfo.areaId == ''
                  ? '--'
                  : `${caseInfo.cityName ? caseInfo.cityName : ''}${
                      caseInfo.countyName &&
                      caseInfo.countyName != caseInfo.cityName
                        ? '-' + caseInfo.countyName
                        : ''
                    }${
                      caseInfo.areaName &&
                      caseInfo.areaName != caseInfo.cityName &&
                      caseInfo.areaName != caseInfo.countyName
                        ? '-' + caseInfo.areaName
                        : ''
                    }`
              }}</span>
              <span v-else class="infoListItemNull">--（信息缺失）</span>
            </li>
            <li class="infoListItem">
              欠薪人数：
              <span v-if="caseInfo.backPayCount">{{
                caseInfo.backPayCount + '人'
              }}</span>
              <span v-else class="infoListItemNull">--（信息缺失）</span>
            </li>
            <li class="infoListItem">
              欠薪金额：
              <span v-if="caseInfo.backPayTotal">{{
                caseInfo.backPayTotal + '元'
              }}</span>
              <span v-else class="infoListItemNull">--（信息缺失）</span>
            </li>
            <li class="infoListItem">
              欠薪始发时间：
              <span v-if="caseInfo.complaintYear">{{
                caseInfo.complaintYear + '-' + caseInfo.complaintMonth
              }}</span>
              <span v-else class="infoListItemNull">--（信息缺失）</span>
            </li>
          </ul>
          <case-other
            v-if="editOther"
            @callback="callbackCaseOther"
            :childData="caseInfo"
          />
        </el-col>
        <el-col :span="15" class="info infoRight">
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">任务分发</div>
          </div>
          <el-row class="infoList">
            <el-col :span="12" class="infoListItem">
              负责地区：
              {{
                caseInfo.areaId == ''
                  ? '--'
                  : `${caseInfo.cityName ? caseInfo.cityName : ''}${
                      caseInfo.countyName &&
                      caseInfo.countyName != caseInfo.cityName
                        ? '-' + caseInfo.countyName
                        : ''
                    }${
                      caseInfo.areaName &&
                      caseInfo.areaName != caseInfo.cityName &&
                      caseInfo.areaName != caseInfo.countyName
                        ? '-' + caseInfo.areaName
                        : ''
                    }`
              }}
              <el-link
                type="primary"
                @click="openTaskDialog"
                v-if="isShowUpdate && caseInfo.status == 'ACCEPTING'"
                >更换地区</el-link
              >
            </el-col>
            <el-col :span="12" class="infoListItem">
              办理负责人：{{
                (caseInfo.complaintManagerNames &&
                  caseInfo.complaintManagerNames.join('、')) ||
                '--'
              }}
              <el-link
                type="primary"
                @click="openPersonDialog"
                v-if="isShowUpdate && caseInfo.status == 'ACCEPTING'"
                >更换负责人</el-link
              >
            </el-col>
            <el-col :span="12" class="infoListItem">
              所属行业：{{ caseInfo.industryName || '--' }}
              <el-link
                type="primary"
                @click="openIndustryDialog"
                v-if="isShowUpdate && caseInfo.status == 'ACCEPTING'"
                >更改行业</el-link
              >
            </el-col>
            <el-col :span="12" class="infoListItem">
              分发企业：
              {{
                caseInfo.complaintCompanyNames.length > 0
                  ? caseInfo.complaintCompanyNames[0]
                  : '--'
              }}
              <el-link
                type="primary"
                @click="openCompanyDialog"
                v-if="isShowUpdate && caseInfo.status == 'ACCEPTING'"
                >更改企业</el-link
              >
            </el-col>
          </el-row>
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme fl">
              当前状态：{{ caseInfo.statusDesc }}
            </div>
            <el-button
              class="saveBtn edit1"
              type="primary"
              v-if="caseInfo.status == 'WAIT_ACCEPT'"
              @click="startAction(caseInfo.id, caseInfo.name)"
              >开始受理</el-button
            >
            <el-button
              class="saveBtn edit1"
              type="primary"
              v-if="caseInfo.status == 'WAIT_ACCEPT'"
              @click="noAction(caseInfo.id, caseInfo.name)"
              >不受理</el-button
            >
            <el-button
              class="saveBtn edit1"
              type="primary"
              v-if="
                caseInfo.status == 'ACCEPTING' &&
                this.$store.state.userType != 'COMPANY'
              "
              @click="endAction(caseInfo.id, caseInfo.name)"
              >受理结束</el-button
            >
          </div>
          <div
            class="infoTitle"
            v-if="caseInfo.statusDesc == '已办结'"
            style="height: auto"
          >
            <div
              class="secondaryTitle secondaryTitleTheme fl"
              style="margin-top: 8px"
            >
              已办结附件：
            </div>
            <uploadAnnex
              @getFileList="getFileListOrder"
              :limitationFactor="limitationFactorOrder"
              @getFile="getFileOrder"
              :typePage="caseDetailLzh"
              :detailId="id"
              :upLoadFile="upLoadFileOrder"
            />
          </div>
          <el-row v-if="caseInfo.statusDesc == '已办结'">
            <el-col :span="24">
              <uploadResult
                style="margin-left: 120px"
                :resultList="upLoadFileOrder"
                @callBackResult="delFile"
                :typePage="caseDetailLzh"
              />
            </el-col>
          </el-row>
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">解决情况</div>
            <el-link
              icon="el-icon-edit"
              class="edit"
              type="primary"
              v-if="
                isShowUpdate && caseInfo.status == 'ACCEPTING' && !editResolve
              "
              @click="toEditResolve"
              >编辑</el-link
            >
          </div>
          <el-row class="infoList" v-if="!editResolve">
            <el-col :span="12" class="infoListItem infoListItemRequired">
              是否解决：{{ resolveStatus || '--' }}
            </el-col>
            <el-col :span="12" class="infoListItem">
              解决方式：{{ caseInfo.finishType || '--' }}
            </el-col>
            <el-col :span="12" class="infoListItem infoListItemRequired">
              涉及人数：{{ caseInfo.involveCount || '--' }}
            </el-col>
            <el-col :span="12" class="infoListItem infoListItemRequired">
              涉及金额：{{ caseInfo.involveTotal || '--' }}
            </el-col>
          </el-row>
          <case-resolve
            @callback="callbackCaseResolve"
            :childData="caseInfo"
            v-if="editResolve"
          />
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">办理进展记录</div>
          </div>
          <div class="infoList">
            <div class="infoListTitles">
              填写办理进展，包括联系投诉人、上门核查、调查、组织协调等。
            </div>

            <el-input
              class="infoListInput"
              :rows="4"
              type="textarea"
              :disabled="
                caseInfo.isRepeatAppeal === 'YES' ||
                caseInfo.status !== 'ACCEPTING'
              "
              placeholder="请填写办理进展"
              v-model="progressContent"
            ></el-input>
            <el-button
              :type="
                caseInfo.isRepeatAppeal === 'YES' ||
                caseInfo.status !== 'ACCEPTING'
                  ? 'info'
                  : 'primary'
              "
              :class="
                caseInfo.isRepeatAppeal === 'YES' ||
                caseInfo.status !== 'ACCEPTING'
                  ? 'commonBut dosabledBtn'
                  : 'saveBtn commonBut'
              "
              :disabled="
                caseInfo.isRepeatAppeal === 'YES' ||
                caseInfo.status !== 'ACCEPTING'
              "
              :loading="isLoading"
              @click="addAppealProgress"
              >添加进展</el-button
            >
          </div>
          <div class="infoTitle">
            <div class="secondaryTitle secondaryTitleTheme">办理进展</div>
          </div>
          <div class="infoList">
            <div>
              <el-steps
                direction="vertical"
                v-if="appealProgressList.length > 0"
              >
                <el-step
                  v-for="(item, index) in appealProgressList"
                  :key="item.id"
                  :title="`操作时间：${item.createTime}`"
                >
                  <span
                    slot="description"
                    v-if="index == 0 && caseInfo.status == 'ACCEPTED'"
                    >受理完成</span
                  >
                  <span
                    slot="description"
                    v-if="index == 0 && item.rightsStatus == 'REFUSED'"
                    class="handle"
                    >不受理原因：</span
                  >
                  <span
                    slot="description"
                    v-if="index < appealProgressList.length - 1"
                    :class="
                      item.handleSource != 'ez' &&
                      item.rightsStatus != 'REFUSED'
                        ? ''
                        : 'handle'
                    "
                    >{{ item.progressContent }}</span
                  >
                  <span slot="description" v-else>提报信息</span>
                </el-step>
              </el-steps>
              <span v-else class="noDataTip">暂无进展记录</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 地区任务分发弹窗 -->
      <dialog-area
        :showTaskProp="showTask"
        @callback="handleCloseArea"
        :childData="caseInfo"
      />
      <!-- 指定责任人弹窗 -->
      <dialog-person
        :showTaskProp="showPerson"
        @callback="handleClosePerson"
        :childData="caseInfo"
      />
      <!-- 所属行业 -->
      <dialog-industry
        :showTaskProp="showIndustry"
        @callback="handleCloseIndustry"
        :childData="caseInfo"
      />
      <!-- 分发企业 -->
      <dialog-company
        :showTaskProp="showCompany"
        @callback="handleCloseCompany"
        :childData="caseInfo"
      />
    </div>
  </div>
</template>
<script>
import caseFiled from './esCaseFiled'
import caseType from './esCaseTypeComp'
import caseDepartment from './caseDepartmentLzh'
import CasePerson from './esCasePerson'
import CaseBase from './esCaseBase'
import CaseOther from './esCaseOther'
import CaseTruth from './esCaseTruth'
import CaseResolve from './esCaseResolve'
import dialogArea from './dialogAreaLzh.vue'
import DialogPerson from './dialogPersonLzh.vue'
import DialogIndustry from './dialogIndustryLzh.vue'
import DialogCompany from './dialogCompanyLzh.vue'
export default {
  name: 'caseDetailLzh',
  components: {
    caseFiled,
    caseType,
    caseDepartment,
    CasePerson,
    CaseBase,
    CaseOther,
    CaseTruth,
    CaseResolve,
    dialogArea,
    DialogPerson,
    DialogIndustry,
    DialogCompany,
  },
  data() {
    return {
      id: '',
      type: '',
      caseInfo: {
        complaintCompanyNames: [],
      },
      isLoading: false,
      editFiled: false,
      editType: false,
      editDepartment: false,
      editPerson: false,
      editBase: false,
      editOther: false,
      editDate: false,
      editResolve: false,
      showTask: false,
      showPerson: false,
      showIndustry: false,
      showCompany: false,
      progressContent: '',
      appealProgressList: [],
      isShowUpdate: false,
      commentContent: '',
      isLzh: false, //是否是梁子湖及梁子湖乡镇监察
      limitationFactorOrder: {
        uploadAnnexUrl: 'api-f/files/upload/save', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        fileId: 'startOrder', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'startOrderForm', //自定义id解决一个页面包含多个上传附件
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M', //自定义报错提示语
        methodTip:
          '请上传已办结附件，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件', //自定义上传文件提示
        uploadBtnType: 'typeTwo', //自定义上传按钮类型
        UploadType: 'typeTwo',
      },
      upLoadFileOrder: [],
      srcListOrder: [],
      oldSrcListOrder: [],
      caseDetailLzh: 'caseDetailLzh',
    }
  },
  mounted() {
    var currentAreaId = this.$store.state.currentAreaId
    if (currentAreaId) {
      if (currentAreaId === '420702' || currentAreaId.indexOf('420702') > -1) {
        this.isLzh = true
      } else {
        this.isLzh = false
      }
    }
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('esCaseList:update') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('myResponsibleLzh:update') > -1
    console.log(this.isShowUpdate)
    this.id = this.$route.query.id
    this.type = this.$route.query.type
    this.getCaseDetail(this.id)
  },
  computed: {
    resolveStatus() {
      if (this.caseInfo.isFinish == 'YES') {
        return '已办结'
      } else {
        return '否'
      }
    },
  },
  methods: {
    changeStringStyle(str) {
      if (str == '' || str == null || str == undefined) {
        return '--（信息缺失）'
      } else {
        return str
      }
    },
    calcColor(row) {
      let colorStr = ''
      if (!row.createTime) return
      let createTime = new Date(row.createTime + ' 00:00:00').getTime()
      let nowDate = new Date().toLocaleDateString()
      let now = new Date(nowDate).getTime()
      if (row.status === 'ACCEPTED' || row.status === 'REFUSED') {
        colorStr = 'GREEN'
      } else {
        if (this.isLzh) {
          if (now - createTime <= 15 * 24 * 60 * 60 * 1000) {
            colorStr = 'GREEN'
          }
          if (
            now - createTime > 15 * 24 * 60 * 60 * 1000 &&
            now - createTime <= 30 * 24 * 60 * 60 * 1000
          ) {
            colorStr = 'YELLOW'
          }
          if (now - createTime > 30 * 24 * 60 * 60 * 1000) {
            colorStr = 'RED'
          }
        } else {
          if (now - createTime <= 30 * 24 * 60 * 60 * 1000) {
            colorStr = 'GREEN'
          }
          if (
            now - createTime > 30 * 24 * 60 * 60 * 1000 &&
            now - createTime <= 60 * 24 * 60 * 60 * 1000
          ) {
            colorStr = 'YELLOW'
          }
          if (now - createTime > 60 * 24 * 60 * 60 * 1000) {
            colorStr = 'RED'
          }
        }
      }
      return colorStr
    },
    //开始受理
    startAction(id, user) {
      const h = this.$createElement
      this.$msgbox({
        title: '提示',
        message: h('p', { style: 'position:relative;padding-left:40px' }, [
          h('i', {
            class: 'el-icon-warning',
            style:
              'position:absolute;left:5px;top: 2px;color: orange;font-size:22px;margin-right:15px',
          }),
          h('span', `修改受理状态为【办理中】后，将短信通知${user}受理状态。`),
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            this.axios
              .post('api-r/rightbackpay/expand/editstatus', {
                id,
              })
              .then((res) => {
                if (!res.data.hasError) {
                  this.$message({
                    type: 'success',
                    message: '操作成功',
                  })
                  this.getCaseDetail(id)
                  done()
                } else {
                  this.$message({
                    type: 'warning',
                    message: res.data.errorMsg,
                  })
                  done()
                }
              })
          } else {
            done()
          }
        },
      }).catch(() => {})
    },
    //已办结
    endAction(id, user) {
      const h = this.$createElement
      this.$msgbox({
        title: '提示',
        message: h('p', { style: 'position:relative;padding-left:40px' }, [
          h('i', {
            class: 'el-icon-warning',
            style:
              'position:absolute;left:5px;top: 2px;color: orange;font-size:22px;margin-right:15px',
          }),
          h('span', `修改受理状态为【已办结】后，将短信通知${user}受理状态。`),
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            this.axios
              .post('api-r/rightbackpay/expand/editstatus', {
                id,
              })
              .then((res) => {
                if (!res.data.hasError) {
                  this.$message({
                    type: 'success',
                    message: '操作成功',
                  })
                  this.getCaseDetail(id)
                  done()
                } else {
                  this.$message({
                    type: 'warning',
                    message: res.data.errorMsg,
                  })
                  done()
                }
              })
          } else {
            done()
          }
        },
      }).catch(() => {})
    },
    getCaseDetail(id) {
      this.axios
        .post('api-r/rightbackpay/expand/findbyid', { id })
        .then((res) => {
          if (!res.data.hasError) {
            this.caseInfo = res.data.result
            console.log(
              this.caseInfo.isRepeatAppeal === 'YES' ||
                this.caseInfo.status !== 'ACCEPTING'
            )
            this.getAppealProgressList(id)
            this.upLoadFileOrder = this.caseInfo.fileList
          } else {
            this.$message({
              type: 'warning',
              message: res.data.errorMsg,
            })
          }
        })
    },
    goBackOne() {
      var url
      if (this.$route.query.isMyResponsibleLzh === 'myResponsibleLzh') {
        url = '/home/unpaidComplaint/myResponsibleLzh'
      } else {
        url = '/home/unpaidComplaint/esCaseList'
      }
      // this.$router.push(url);
      this.$router.push({
        path: url,
        query: {
          isMyResponsibleLzh: this.$route.query.isMyResponsibleLzh,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: url,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    toEditFiled() {
      this.editFiled = true
    },
    callbackCaseFiled(val) {
      this.editFiled = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    toEditType() {
      this.editType = true
    },
    callbackCaseType(val) {
      this.editType = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    toEditDepartment() {
      this.editDepartment = true
    },
    callbackDepartment(val) {
      this.editDepartment = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    toEditPerson() {
      this.editPerson = true
    },

    callbackCasePerson(val) {
      this.editPerson = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    toEditBase() {
      this.editBase = true
    },
    callbackCaseBase(val) {
      this.editBase = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    toEditOther() {
      this.editOther = true
    },
    callbackCaseOther(val) {
      this.editOther = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    toEditResolve() {
      this.editResolve = true
    },
    callbackCaseResolve(val) {
      this.editResolve = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    openTaskDialog() {
      this.showTask = true
    },
    handleCloseArea(val) {
      this.showTask = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    // 办理负责人
    openPersonDialog() {
      this.showPerson = true
    },
    handleClosePerson(val) {
      this.showPerson = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    // 所属行业
    openIndustryDialog() {
      this.showIndustry = true
    },
    handleCloseIndustry(val) {
      this.showIndustry = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    // 分发企业
    openCompanyDialog() {
      this.showCompany = true
    },
    handleCloseCompany(val) {
      this.showCompany = false
      if (val.success) {
        this.getCaseDetail(this.id)
      }
    },
    addAppealProgress() {
      const { id, progressContent } = this
      if (progressContent.length == 0) {
        this.$message({
          type: 'warning',
          message: '请输入办理进展详情',
        })
        return false
      }
      this.isLoading = true
      this.axios
        .post('api-r/rightbackpayprogress/expand/add', {
          rightsId: id,
          progressContent,
          handleSource: 'ez',
        })
        .then((res) => {
          if (!res.data.hasError) {
            this.$message({
              type: 'success',
              message: '添加成功',
            })
            this.progressContent = ''
            this.getAppealProgressList(id)
          } else {
            this.$message({
              type: 'warning',
              message: res.data.errorMsg,
            })
          }
          setTimeout(() => {
            this.isLoading = false
          }, 1000)
        })
    },
    /**
     * @name: 查询办理进展列表接口 BY WangLinFenf
     * @param {*}
     * @Author: 471826078@qq.com
     */
    getAppealProgressList(id) {
      this.axios
        .post('api-r/rightbackpayprogress/expand/list', {
          rightsId: id,
        })
        .then((res) => {
          if (!res.data.hasError) {
            this.appealProgressList = res.data.result
          } else {
            this.$message({
              type: 'warning',
              message: res.data.errorMsg,
            })
          }
        })
    },
    // 不受理
    noAction(id, user) {
      this.commentContent = ''
      if (document.getElementById('commentContent')) {
        document.getElementById('commentContent').value = ''
      }
      const h = this.$createElement
      this.$msgbox({
        title: '提示',
        message: h(
          'p',
          {
            style: 'position:relative;padding-left:40px;height:150px',
            attrs: {
              class: 'el-textarea',
            },
          },
          [
            h('i', {
              class: 'el-icon-warning',
              style:
                'position:absolute;left:5px;top: 2px;color: orange;font-size:22px;margin-right:15px',
            }),
            h(
              'span',
              `修改受理状态为【不受理】后，将短信通知${user}受理状态。`
            ),
            h('textarea', {
              attrs: {
                class: 'el-textarea__inner',
                autocomplete: 'off',
                rows: 4,
                id: 'commentContent',
                placeholder: '请输入不受理原因',
                maxlength: '300',
              },
              style:
                'position:absolute;left: 40px;top: 54px;width: 86%;height: 100px;border: 1px solid #ccc;border-radius: 5px;padding: 10px;',
              value: this.commentContent,
              on: { input: this.onCommentInputChange },
            }),
          ]
        ),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            this.axios
              .post('api-r/rightbackpayprogress/expand/refuse', {
                rightsId: id,
                progressContent: this.commentContent,
              })
              .then((res) => {
                if (!res.data.hasError) {
                  this.$message({
                    type: 'success',
                    message: '操作成功',
                  })
                  this.getCaseDetail(id)
                  done()
                } else {
                  this.$message({
                    type: 'warning',
                    message: res.data.errorMsg,
                  })
                  done()
                }
              })
          } else {
            done()
          }
        },
      }).catch(() => {})
    },
    onCommentInputChange() {
      this.commentContent = document.getElementById('commentContent').value
    },
    getFileOrder(val) {
      this.getCaseDetail(this.id)
    },
    // 删除附件
    delFile(val) {
      this.axios
        .post('api-f/files/deleteById', {
          id: val[0].id,
        })
        .then((res) => {
          if (!res.data.hasError) {
            this.getCaseDetail(this.id)
          } else {
            this.$message({
              type: 'warning',
              message: res.data.errorMsg,
            })
          }
        })
    },
    getFileListOrder(val) {
      this.oldSrcListOrder.push(val)
      this.srcListOrder.push(val)
    },
  },
}
</script>
<style lang="less" scoped>
.topCon .el-row {
  padding: 0 24px;
}
.topTitle {
  background: #fff;
  height: 85px;
  padding: 16px 0px;
  position: relative;
  // border-bottom: 1px solid #e3e7e9;
  h2 {
    vertical-align: middle;
    font: bold 18px Microsoft YaHei;
    color: #333333;
    .iconfanhui1 {
      font-size: 20px;
      margin-right: 6px;
      cursor: pointer;
    }
    span {
      font-weight: normal;
      display: inline-block;
      padding: 0 6px;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      text-align: center;
      color: #fff;
      margin-left: 12px;
    }
    .during {
      background: #ffac37;
    }
    .finished {
      background: #009588;
    }
    .actioning {
      background: #0f76c4;
    }
    .reRecord {
      background: #999;
    }
    .reRecordTip {
      font-size: 14px;
      color: #666666;
      width: auto;
    }
  }
  &Info {
    line-height: 14px;
    font-size: 14px;
    margin-top: 10px;
    color: #666666;
    li {
      display: inline-block;
      margin-right: 30px;
      position: relative;
      margin-left: 28px;
    }
  }
  .btn {
    position: absolute;
    top: 26px;
    right: 24px;
    width: 136px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #009588 !important;
    border-radius: 21px;
    font-size: 14px;
    color: #009588 !important;
    text-align: center;
    background: #e4ebf1;
    padding: 0;
  }
  .btn:hover {
    background: rgba(0, 149, 136, 0.1) !important;
  }
  .dateShow {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 240px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #009588;
    text-align: center;
    padding: 0;
  }
}
.mainCon {
  top: 230px;
  padding: 0;
}
.infoLeft {
  padding-top: 24px;
  padding-bottom: 24px;
  padding-right: 24px;
  border-right: 10px solid #f5f7fa;

  padding-left: 24px;
  .title {
    font: bold 18px Microsoft YaHei;
    color: #333333;
  }
}
.infoRight {
  // padding-top: 24px;
  padding-left: 24px;
  padding-right: 24px;
  position: relative;
  .title {
    font: bold 18px Microsoft YaHei;
    color: #333333;
  }
  &::before {
    content: '';
    width: 10px;
    background-color: #f5f7fa;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
  }
}
.info {
  background-color: #fff;
  height: calc(100%);
  &TopTip {
    margin-top: 15px;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    background-color: #fffbe6;
    // color: red;
    font-size: 14px;
    position: relative;
    &::before {
      width: 24px;
      height: 30px;
      content: '';
      background-color: #fffbe6;
      position: absolute;
      top: 0;
      left: -24px;
    }
    &::after {
      width: 24px;
      height: 30px;
      content: '';
      background-color: #fffbe6;
      position: absolute;
      top: 0;
      right: -24px;
    }
    .el-icon-warning {
      vertical-align: middle;
    }
  }
  &Title {
    height: 35px;
    line-height: 35px;
    margin-top: 20px;
    position: relative;
    .edit {
      position: absolute;
      right: 15px;
      top: 0px;
      height: 20px;
    }
    .edit1 {
      margin-left: 15px;
      padding: 5px 10px;
    }
    .text {
      display: inline-block;
      color: #333;
      line-height: 20px;
      height: 20px;
      border-left: 4px solid #009588;
      padding-left: 15px;
      font: bold 16px Microsoft YaHei;
    }
  }
  &List {
    padding: 5px 0;
    &Item {
      padding-left: 15px;
      line-height: 30px;
      font-size: 14px;
      color: #333;

      /deep/.el-link {
        height: 30px;
        vertical-align: top;
        &--inner {
          height: 26px !important;
          line-height: 26px;
        }
      }
    }
    // 修改步骤条样式
    /deep/ .el-steps {
      .el-step__icon.is-text {
        border: none;
        background-color: #eee;
        border-radius: 50%;
        width: 10px;
        height: 10px;
      }
      .el-step__icon-inner {
        display: none;
      }
      .el-step__line {
        background-color: #eee;
        left: 4px !important;
        top: 9px !important;
        bottom: -8px !important;
      }
      .el-step__title {
        font-size: 12px;
        color: #999;
      }
      .el-step__description {
        margin-bottom: 15px;
        font-size: 14px;
        color: #444;
      }
    }
    .infoListTitles {
      font-size: 14px;
      color: #999;
    }
    .infoListInput {
      margin: 15px 0;
    }
  }
}
.noDataTip {
  line-height: 26px;
  font-size: 14px;
  color: #666;
}
.commonBut {
  width: 90px !important;
}
.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.green {
  background: rgb(4, 151, 138);
}
.yellow {
  background: rgb(246, 155, 34);
}
.red {
  background: rgb(218, 4, 29);
}
.infoListItemNull {
  color: #d81e06;
}

.handle {
  color: #e02020;
}
</style>
